<!-- pic -->
<template>
  
      <div class="card" @tap="details">
				<div class="img">
					<span class="tag"></span>
					<img src="~@/static/home/pic(1).png">
				</div>
				<div class="info">
					<h2>强生婴儿牛奶沐浴露1L*2儿童宝宝洗澡液沐浴乳新生洗护滋润家庭装</h2>
					<div class="jifen">
						积分 <span> 49.90</span>
						<em v-if="quota">+{{quota}}配额积分</em>
					</div>
					<div class="yuanjia">
						<span>原价 <del>59.90</del></span>
						<span v-if="isYuexiao">月销 3511</span>
						<button v-if="isBtn">立即抢购</button>
					</div>
				</div>
			</div>

</template>

<script>
export default {
  props:{
		//是否显示按钮
		isBtn:{
			default: false, 
		},
		//是否显示月销 和按钮不能共存
		isYuexiao:{
			default: true, 
		},
		//是否显示配额
		quota:{
			default: false, 
		},
	},
  data () {
    return {
    };
  },
  components: {},
  computed: {},
  mounted(){
		console.log(this.isBtn)
	},
  methods: {
		details(){
			uni.navigateTo({
					url: '/pages/details/details?id=1'
			});
		}
	}
}

</script>
<style lang='less' scoped>
	
			.card{
			margin-top: 30upx;
			width: 100%;
			display: inline-block;
			border-radius: 20upx;
			background: #fff;
			.img{
				float: left;
				width: 220upx;
				height: 220upx;
				position: relative;
				img{width: 100%;height: 100%;}
				.tag{
					background: url('~@/static/home/bk.png') no-repeat;
					background-size: 100% 100%;
					width:27upx;
					height: 62upx;
					position: absolute;
					left: 28upx;
					top: 0;
				}
			}
			.info{
				position: relative;
				padding-right: 30upx;
				float: left;
				width: 450upx;
				h2{
					font-size: 26upx;
					color: #000;
					margin-top: 26upx;
				}
				.jifen{
					position: absolute;
					left: 0;
					top: 130upx;
					color: #FF4439;
					font-size: 20upx;
					width: 100%;
					span{font-size: 30upx;font-weight: bold}
					em{font-style: normal;font-size: 26upx; margin-left: 10upx;display: inline;}
				}
				.yuanjia{
					position: absolute;
					left: 0;
					top: 169upx;
					color: #A9A9A9;
					font-size: 20upx;
					width: 100%;
					span:nth-child(1){float: left;
						del{text-decoration:line-through;display: inline;}
					}
					span:nth-child(2){float: right;right: 20upx;}
					button{
						float: right;
						margin-right: 30upx;
						background: #FF4439;
						border-radius: 10upx;
						height: 36upx;
						line-height: 36upx;
						width: 100upx;
						padding: 0;
						color: #fff;
						font-size: 20upx;
					}
				}
			}
		}
		
</style>